【NodeJS】完成简单前后端分离登陆注册功能

2024-06-16 23:56| 来源: 网络整理| 查看: 265

nodejs写的前后端分离的登陆/注册，使用MongoDB作为数据库，使用vue作为前端框架，使用vue-cli 3.0。由于一些不可描述的原因（懒），ajax使用的是$.ajax

目录结构

首先是前端

前端：

首先是APP.vue，写的非常简单，登陆注册的切换使用动态组件

Login register import Login from "./components/Login.vue"; import Register from "./components/Register.vue"; export default { name: 'app', components:{ Login, Register }, data(){ return { componentType: "Login" } }, methods: { changeType(type){ if (!!type){ this.componentType = "Register" } else { this.componentType = "Login" } } } }

然后是两个组件，也非常简单，注册写了一个简单的验证

Login login! import $ from 'jQuery'; export default { data(){ return { username: "", password: "" } }, methods: { login(){ $.ajax({ method: "POST", url: 'http://localhost:3000/login', data: { username: this.username, password: this.password }, success: function(res){ console.log(res) } }) } } }

Register! import $ from 'jQuery'; export default { data(){ return { username: "", password: "", repassword: "", ans: "", firstNum: 0, lastNum: 0, check: false, errStr: false } }, methods: { register(){ let isCheck = this.$refs.codeVal.value === (this.firstNum + this.lastNum).toString(); if(!(isCheck && this.username && this.password === this.repassword)){ if(this.password !== this.repassword){ this.errStr = "两次密码输入不一致" }else if(!isCheck){ this.errStr = "验证码错误" }else if(!this.username){ this.errStr = "无用户名" } return alert("注册未完成") } $.ajax({ method: "POST", url: 'http://localhost:3000/register', data: { username: this.username, password: this.password }, success: function(res){ let oData = JSON.parse(res) console.log(res) if(oData.code === "S"){ alert(oData.str) }else if( oData.code === "E"){ alert(`err: ${oData.str}`) } } }) }, showCheck(type){ if(!type){ if( this.repassword !="" && this.repassword === this.password ) { this.errStr = "" this.firstNum = parseInt(Math.random()*30) this.lastNum = parseInt(Math.random()*20) this.check = true }else if (this.repassword != this.password){ this.check = false this.errStr = "两次密码输入不一致" } }else { let temp = this.firstNum + this.lastNum if( this.$refs.codeVal.value === temp.toString() ){ if( this.username === "" ){ this.errStr = "无用户名" return; } else { this.errStr = "" } }else { this.errStr = "验证码错误" } } }, } }

前端写的很简单，就不赘述了。

NodeJS

server.js

接下来我们把这个文件拆分开来讲

[1] express

首先我们引入express，用于设置中间件响应HTTP请求

const express = require("express"); const app = express(); [2] cors

引入cors来进行跨域

const cors = require("cors"); [3] mongoose

引入mongoose用来操作数据库（MongoDB）

const mongoose = require("mongoose"); // 设置数据库地址 const url = "mongodb://localhost/userDB"; // 链接数据库 mongoose.connect(url, function(err){ if(err) return console.log("MongoDB Connect err:", err) console.log("MongoDB Connect Success") }) // 定义schema const userDBSchema = new mongoose.Schema({ username: String, password: String }) mongoose.model("userDB", userDBSchema)

目前的功能只需要引入这几个包，接下来开始搞事。

// 通过express使用cors来进行跨域 app.use(cors({ origin: ["http://localhost:8080"], methods: ["POST","GET"], allowHeader: ["Content-Type", "Authorization"] }))

当请求为Login时

// 当请求为login时，进行判断 app.get("/login", function(req,res){ // 创建数据库实例 const userDB = mongoose.model("userDB"); let resStr = {} // 检索数据库 ajax发送来的数据在req.query里 // 使用res.end()来返回数据，只能返回字符串或者Buffer userDB.find({username:req.query.username},function(err, data){ if(err){ resStr = { res: err, str: "数据库异常", code: "E" } res.end(JSON.stringify(resStr)) }else{ if(!data.length){ resStr = { res: data, str: "用户查询为空", code: "E" } res.end(JSON.stringify(resStr)) }else { if(req.query.password == data[0].password){ resStr = { res: data, str: "查询成功", code: "S" } res.end(JSON.stringify(resStr)) }else { resStr = { res: [], str: "密码错误", code: "E" } res.end(JSON.stringify(resStr)) } } } }) })

当请求为Register时

// 当请求为login时，进行判断 app.get("/register", function(req,res){ const userDB = mongoose.model("userDB"); let oData = req.query; let resStr = {}; let user = new userDB({ username: oData.username, password: oData.password }) userDB.find({username:req.query.username},function(err, data){ if (err) { resStr = { res: err, str: "数据库异常", code: "E" } res.end(JSON.stringify(resStr)) } else if( data.length ) { resStr = { res: "", str: "用户已存在", code: "E" } res.end(JSON.stringify(resStr)) }else{ // 储存用save方法 user.save(function(err){ if(err) return console.log("MongoDB Save err:", err); console.log("MongoDB Save Success") resStr = { res: req.query, str: "注册成功", code: "S" } res.end(JSON.stringify(resStr)) }) } }) })

监听端口，建立服务

const server = app.listen(3000, function(){ let host = server.address().address let port = server.address().port console.log(`应用实例，访问地址为 http://${host}:${port}`) })

这样一个非常非常简单的登陆注册就写完了。

【本文地址】

公司简介

联系我们